<template>
  <div class="app-container">  
      <el-form ref="filterForm" :model="formData" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="标题" prop="questionName">
          <el-input v-model="formData.questionName" clearable placeholder="机构名称" maxlength="80" show-word-limit/>
        </el-form-item>
        <el-form-item label="科目" prop="subjectID">
          <el-select v-model="formData.subjectID" placeholder="请选择">
            <el-option
            v-for="item in subjectOptions"
            :key="item.ID"
            :label="item.subjectName"
            :value="item.ID">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item v-if="districtOptions.length > 0" label="区域" prop="districtID">
          <el-select v-model="formData.districtID" placeholder="请选择">
            <el-option
            v-for="item in districtOptions"
            :key="item.ID"
            :label="item.districtName"
            :value="item.ID">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">          
            <el-radio-group v-model="formData.questionType">
              <el-radio-button label="1">单选</el-radio-button>
              <el-radio-button label="2">多选</el-radio-button>
              <el-radio-button label="3">简答</el-radio-button>
              <el-radio-button label="4">填空</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="选项" >
      <el-table
        :data="formData.questionOption"
        border
        style="width: 100%">
      <el-table-column
        label="主题">
        <template slot-scope="{row}">
          <el-input v-model="row.optionTooltip" clearable placeholder="主题" maxlength="80" show-word-limit/>
        </template>
      </el-table-column>
      <el-table-column
        label="答案" width="140">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.optionVolume"
            active-text="正确"
            inactive-text="错误">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="320">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" @click="handleQuestionAppend(row.ID)">新增</el-button>
          <el-button type="danger" size="small" @click="handleQuestionRemove(row.ID)" v-if="formData.questionOption.length > 1">删除</el-button>
          <el-button type="success" size="small" @click="handleQuestionMoveUp(row.ID)" v-if="formData.questionOption.length > 1">上移</el-button>
          <el-button type="warning" size="small" @click="handleQuestionMoveDown(row.ID)" v-if="formData.questionOption.length > 1">下移</el-button>
        </template>
      </el-table-column>
      </el-table>
        </el-form-item>
        <el-form-item label="摘要" prop="questionContent">
          <Tinymce v-model="formData.questionContent" :height="200" />
        </el-form-item>
        <el-form-item label="解析" prop="questionAnalysis">
          <Tinymce v-model="formData.questionAnalysis" :height="200" />
        </el-form-item>
        <el-form-item label="备注" prop="questionRemark">
          <el-input type="textarea" v-model="formData.questionRemark" maxlength="200" show-word-limit clearable placeholder="备注"/>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="14">          
            <el-button type="info" @click="onFormSaveButton()">保存</el-button>
            <el-button type="primary" @click="onFormSaveAndNewButton()">保存并新建</el-button>
            <el-button type="primary" @click="onFormNewButton()">新建</el-button>
        </el-col>
        <el-col :span="6" style="text-align:right;">          
          <el-button type="warning" @click="onFormCannelButton()">取消</el-button>
          <el-button type="danger" v-if="questionID > 0" @click="onFormRemoveButton()">删除</el-button>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Upload from '@/components/Upload/SingleImage3'
import Tinymce from '@/components/Tinymce'
import {getQuestionDetail,saveQuestion,removeQuestion} from '@/api/examine/question'
import {getSubjectUsabelList,getSubjectDistrictList} from '@/api/examine/subject'



export default {
  name: 'questionForm',
  components: { Upload,Tinymce },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      questionID:undefined,
      subjectOptions:[],
      districtOptions:[],
      formData: {
        questionType:undefined,
        questionOption:[{
          "optionType":1,
          "optionTooltip":"",
          "optionVolume":false
        }],
        questionContent:"",
        questionAnalysis:""
      },
      rules:{
         questionName: [
            { required: true, message: '请输入机构名称', trigger: 'blur' },
            { min: 2, max: 80, message: '长度在 3 到 80 个字符', trigger: 'blur' }
          ],
         establishDate: [
            { required: true, message: '请选择/输入成立日期', trigger: 'blur' },
            { len: 10, message: '日期应为10位', trigger: 'blur' }
          ],
         questionRegAddress: [
            { required: true, message: '请输入机构注册地址', trigger: 'blur' },
            { min: 2, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur' }
          ],
      }
    }
  },
  created() {
    let questionID = this.$route.query.questionID 
    questionID = parseInt(questionID)
    if(isNaN(questionID) == false){
      this.questionID = questionID
      this.getInfo()
    }
    this.initSubjectList()
  },
  methods: {
    getInfo:function(){
      let _this = this;
      getQuestionDetail({
        "questionID":this.questionID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.formData = response.data
            _this.formData.questionOption.forEach((index,item)=>{
              console.log(index,item)
              let _optionData = {
                "optionTooltip":item['optionTooltip'],
                "optionVolume":0,
                "optionType":item['optionType'],
              }
              if(item['optionVolume'] == 2){
                _optionData['optionVolume'] = true
              }else{
                _optionData['optionVolume'] = false
              }
              _this.formData.questionOption[index] = _optionData
            })
            _this.formData.questionID = _this.questionID
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    initSubjectList:function(){
      let _this = this;
      getSubjectUsabelList({
        "page":1,
        "size":100
      }).then((response) => {
          if (response.code === 200) {
            this.subjectOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleSubjectDistrictList:function(subjectID){
      let _this = this;
      getSubjectDistrictList({
        "page":1,
        "subjectID":subjectID,
        "size":100
      }).then((response) => {
          if (response.code === 200) {
            this.districtOptions = response.data.list
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleQuestionMoveUp:function(index){
      if(index > 0){
        index = index-1
      }
    },
    handleQuestionMoveDown:function(index){
      index = index+1
      if(index < this.formData.questionOption.length){

      }
    },
    handleQuestionRemove:function(index){
      this.formData.questionOption.splice(index,1)
    },
    handleQuestionAppend:function(){
      this.formData.questionOption.push(
              {
                "optionType":1,
                "optionTooltip":"",
                "optionVolume":false
              }
      )
    },
    onFormSaveButton:function(){
      let _this = this;
      this.$refs['filterForm'].validate((valid) => {
        if (valid) {
            _this.formData.questionOption.forEach((index,item)=>{
              console.log(index,item)
              let _optionData = {
                "optionTooltip":item['optionTooltip'],
                "optionVolume":0,
                "optionType":item['optionType'],
              }
              if(item['optionVolume'] == true){
                _optionData['optionVolume'] = 2
              }else{
                _optionData['optionVolume'] = 1
              }
              _this.formData.questionOption[index] = _optionData
            })
            _this.formData.questionID = _this.questionID
            saveQuestion(_this.formData).then((response) => {
              console.log("getList",response)
                if (response.code === 200) {
                  _this.$message({
                    message: "成功",
                    type: 'error'
                  })
                } else {
                  _this.$message({
                    message: response.msg,
                    type: 'error'
                  })
                }
            })
        } else {
            console.log('error submit!!');
            return false;
        }
      })
    },
    onFormSaveAndNewButton:function(){
      let _this = this;
      _this.formData.questionOption.forEach((index,item)=>{
        console.log(index,item)
        if(item['optionVolume'] == true){
          item['optionVolume'] = 2
        }else{
          item['optionVolume'] = 1
        }
        _this.formData.questionOption[index] = item
      })
      saveQuestion(_this.formData).then((response) => {
          if (response.code === 200) {
            _this.onFormNewButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    onFormNewButton:function(){
        this.formData = {

        }
    },
    onFormCannelButton:function(){
      this.$router.push({ path: 'question'})
    },
    onFormRemoveButton:function(){
      let _this = this;
      removeQuestion({
        "questionID":this.questionID
      }).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.onFormCannelButton()
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
</style>